<template>
  <div class="outbound">
    <div class="tab-nav">
      <div
        class="tab-nav-item"
        :class="{ active: statusIndex == 1 }"
        @click="changeRecordView(1)"
      >
        <span>{{ replaceRecordNum1 }}</span>
        <span>
          更换提醒
        </span>
      </div>
      <div
        class="tab-nav-item"
        :class="{ active: statusIndex == 2 }"
        @click="changeRecordView(2)"
      >
        <span>{{ replaceRecordNum2 }}</span>
        <span>
          更换记录
        </span>
      </div>
    </div>
    <div class="outbound-work">
      <div class="outbound-work-wrapper">
        <div
          class="desc_box"
          v-for="(listItemData, listItemIndex) in tableData"
          :key="listItemIndex"
          @click="eventNext(listItemData)"
        >
          <div class="item_title">
            <span class="title-label">
              <template v-if="!listItemData.deviceId">
                部门
              </template>
              <template v-if="listItemData.deviceId">
                设备
              </template>
            </span>
            <span class="title-text">
              <template v-if="!listItemData.deviceId">
                {{ listItemData.departmentName }}
              </template>
              <template v-if="listItemData.deviceId">
                {{ listItemData.deviceName }}
              </template>
            </span>
            <template>
              <span class="title-tip" style="text-align: right;">
                更换数量：{{ listItemData.countNum }}
              </span>
            </template>
          </div>
          <div class="item-body">
            <span v-if="listItemData.deviceId">
              设备编号：{{ listItemData.deviceCode }}
            </span>
            <span v-else></span>
            <span
              class="item-show"
              @click.stop="eventpartListShow(listItemData, listItemIndex)"
            >
              <template v-if="showIndex === listItemIndex && show">
                <span>收起</span>
              </template>
              <template v-else>
                <span>展开</span>
              </template>
            </span>
          </div>
          <template v-if="showIndex === listItemIndex && show">
            <div
              class="item-chlid"
              v-for="(item, index) in listItemData.partList"
              :key="item.id + index"
              @click.stop="eventChlid(item)"
            >
              <template v-if="statusIndex == 1">
                <div class="child-title">
                  <span class="child-label">
                    {{ item.componentId ? "部件" : "设备" }}
                  </span>
                  <span class="child-ellipsis">
                    {{ item.deviceName || "" }}
                    {{ item.componentName ? " - " + item.componentName : "" }}
                  </span>
                  <span
                    class="child-tip"
                    :class="'status' + item.status"
                    style="text-align: right;"
                  >
                    {{ item.status | statusText }}
                  </span>
                </div>
                <div class="child-body" v-if="item.stockCatName">
                  部件规格：{{ item.stockCatName }}
                </div>
                <div class="child-body">
                  更换周期：
                  {{ item.replaceCycle }}
                  {{ replaceCycleUnitText[item.replaceCycleUnit] }}
                </div>
                <div class="child-body">
                  上次更换：
                  {{ item.startTime | formatDate("YYYY-MM-DD HH:mm") }}
                </div>
                <div class="child-body handle">
                  更换状态：
                  {{ item.residueTime > 0 ? "剩余" : "逾期" }}
                  {{
                    item.residueTime > 0 ? item.residueTime : -item.residueTime
                  }}
                  天
                  <div class="handle-btn">
                    <span class="btn" @click.stop="eventReplaceAdd(item)">
                      执行
                    </span>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="child-title">
                  <span class="child-label">
                    {{ item.componentId ? "部件" : "设备" }}
                  </span>
                  <span class="child-ellipsis">
                    {{ item.deviceName || "" }}
                    {{ item.componentName ? " - " + item.componentName : "" }}
                  </span>
                  <span
                    class="child-tip"
                    :class="'status' + item.status"
                    style="text-align: right;"
                  >
                    {{ item.status | statusText }}
                  </span>
                </div>
                <div class="child-body">执 行 人：{{ item.operatorName }}</div>
                <div class="child-body">
                  更换时间：
                  {{ item.updateTime | formatDate("YYYY-MM-DD HH:mm") }}
                </div>
                <div class="child-body handle">
                  更换状态：
                  <template v-if="item.status === 11">
                    提前
                    {{ item.advanceTime }}
                    <!-- {{diffTime(item)}} -->
                    天
                  </template>
                  <template v-else>
                    {{ item.status | statusText }}
                  </template>
                  <div class="handle-btn">
                    <span class="btn" @click.stop="eventDetail(item)">
                      详情
                    </span>
                  </div>
                </div>
              </template>
            </div>
          </template>
          <div
            class="newpage_work_more"
            v-if="showMore && show && showIndex === listItemIndex"
            @click.stop="getMore(listItemData)"
          >
            查看更多
          </div>
        </div>
        <div v-if="!tableData.length" class="not-content">
          <img src="/static/img/zwlr-icon.png" />
          <div class="title">暂无数据</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { TransferDom } from "vux";
import iuCard from "@/components/common/card/index";
import iuHeader from "@/components/common/header/index";
import DeviceDao from "@/daos/device_dao";
import depTree from "@/components/common/tree";
import dayjs from "dayjs";
// import Common from "@/config/commom";
export default {
  name: "replace-list",
  directives: {
    TransferDom
  },
  components: {
    depTree,
    iuHeader,
    iuCard
  },
  data() {
    return {
      statusIndex: 1,
      showIndex: 1,
      viewType: 1,
      deviceId: 0,
      showMore: false,
      showPie: false,
      showMoreBtn: false,
      show: false,
      // tableData: [],
      dataList1: [],
      dataList2: [],
      partList: [],
      isLastLevel: false,
      showTree: false,
      pageSize: 10,
      pageNum: 1,
      childPageSize: 10,
      childPageNum: 1,
      demo01: "",
      replaceCycleUnitText: ["", "天", "周", "月", "年"],
      filterCache: {},
      // curDepartment: {
      //   departmentName: "",
      //   id: ""
      // },
      url: "",
      localUrl: "",
      status3: false,
      total: 0,
      store: {
        id: 0
      }
    };
  },
  //返回首页的公共方法
  inject: ["backToHomepage"],
  activated() {
    // if (!this.user) {
    //   this.getUser();
    // } else {
    //   this.init();
    // }

    this.getoutboundMore();
  },
  props: {
    curDepartment: {
      type: Object,
      default: () => {
        return {};
      }
    },
    navIndex: Number
  },
  watch: {
    curDepartment: {
      deep: true,
      immediate: true,
      handler: function() {
        if (this.navIndex === 1) {
          this.getoutboundMore();
        }
      }
    }
  },
  filters: {
    statusText(key) {
      let text = "";
      switch (key) {
        case 1:
          text = "未更换";
          break;
        case 3:
          text = "逾期未更换";
          break;
        case 5:
          text = "更换完成";
          break;
        case 7:
          text = "逾期完成";
          break;
        case 9:
          text = "无需更换";
          break;
        case 11:
          text = "提前更换";
          break;
        default:
          text = "未更换";
          break;
      }
      return text;
    }
  },
  computed: {
    user() {
      // if (!this.$store.state.user) {
      //   this.$store.commit(
      //     "saveUser",
      //     JSON.parse(localStorage.getItem("user"))
      //   );
      // }
      return this.$store.state.user;
    },
    tableData() {
      return this[`dataList${this.statusIndex}`];
    },
    replaceRecordNum1() {
      let num = 0;
      this.dataList1.forEach(e => {
        num += e.countNum;
      });
      return num;
    },
    replaceRecordNum2() {
      let num = 0;
      this.dataList2.forEach(e => {
        num += e.countNum;
      });
      return num;
    }
  },
  methods: {
    init() {},
    back() {
      this.$router.go(-1);
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    handler(e) {
      this.pageNum = 1;
      // this.pageSize = 5;
      this.statusIndex = e;
      this.reset();
      this.getoutboundMore(null);
    },
    handleNav(index) {
      this.navIndex = index;
    },
    changeRecordView(index) {
      this.statusIndex = index;
      this.showIndex = null;
      this.show = false;
      this.showMore = false;
      this.childPageNum = 1;
      this.getoutboundMore();
    },
    getMore(item) {
      // this.pageNum = page.num;
      this.childPageNum++;
      // console.log(1);
      this.getReplaceTaskRecordDepartmentDetails(item);
    },
    getoutboundMore() {
      if (!this.curDepartment || !this.curDepartment.id) {
        return;
      }
      if (this.user) {
        let node = this.treeFind(
          this.user.serviceAreaTree.children,
          e => e.id === this.curDepartment.id
        );
        this.isLastLevel = node && !node.children.length;
      }
      if (this.$vux) {
        this.$vux.loading.show({
          text: "Loading"
        });
      }
      // console.log(this.$vux);
      this.getReplaceTaskRecordDepartment(1);
      this.getReplaceTaskRecordDepartment(2);
    },
    getReplaceTaskRecordDepartment(tabIndex) {
      if (this.isLastLevel) {
        this.getReplaceTaskRecordDevice(tabIndex);
        return;
      }
      DeviceDao.getReplaceTaskRecordDepartment(
        {
          // orgId: this.user.org.id,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          departmentId: this.curDepartment.id,
          viewType: tabIndex
        },
        res => {
          if (this.$vux) {
            this.$vux.loading.hide();
          }
          if (this.pageNum === 1) {
            this[`dataList${tabIndex}`].splice(
              0,
              this[`dataList${tabIndex}`].length
            );
          }
          if (res && res.length) {
            this[`dataList${tabIndex}`].push(...res);
          }
        }
      );
    },
    getReplaceTaskRecordDepartmentDetails(item) {
      // console.log(item);
      if (this.$vux) {
        this.$vux.loading.show({
          text: "Loading"
        });
      }
      DeviceDao.getReplaceTaskRecordDepartmentDetails(
        {
          pageNum: this.childPageNum,
          pageSize: this.childPageSize,
          departmentId: item.departmentId || this.curDepartment.id,
          deviceId: item.deviceId,
          viewType: this.statusIndex
        },
        res => {
          if (this.$vux) {
            this.$vux.loading.hide();
          }
          if (
            !this[`dataList${this.statusIndex}`][this.showIndex].partList ||
            this.childPageNum === 1
          ) {
            this.$set(
              this[`dataList${this.statusIndex}`][this.showIndex],
              "partList",
              res.content
            );
          } else {
            this[`dataList${this.statusIndex}`][this.showIndex].partList.push(
              ...res.content
            );
          }
          this.showMore =
            res.totalPages && this.childPageNum !== res.totalPages;
        }
      );
    },
    getReplaceTaskRecordDevice(tabIndex) {
      DeviceDao.getReplaceTaskRecordDevice(
        {
          pageNum: this.childPageNum,
          pageSize: this.childPageSize,
          departmentId: this.curDepartment.id,
          deviceId: this.deviceId,
          viewType: tabIndex
        },
        res => {
          if (this.$vux) {
            this.$vux.loading.hide();
          }
          if (this.pageNum === 1) {
            this[`dataList${tabIndex}`].splice(
              0,
              this[`dataList${tabIndex}`].length
            );
          }
          if (res && res.length) {
            this[`dataList${tabIndex}`].push(...res);
          }
        }
      );
    },
    //展开更多
    changeMore() {
      this.showMore = !this.showMore;
    },
    change(id, departmentName) {
      this.childPageNum = 1;
      this.show = false;
      this.curDepartment.id = id;
      this.curDepartment.departmentName = departmentName;
      let filterCache = {};
      filterCache.curDepartment = this.curDepartment;
      this.$store.commit("setFilterCache", filterCache);
      this.getoutboundMore();
    },
    showTreeFn(status) {
      // console.log(status)
      if (status) {
        this.$refs.selece_icon.$el.style.transform = "rotate(-180deg)";
      } else {
        this.$refs.selece_icon.$el.style.transform = "rotate(0deg)";
      }
      this.showTree = status;
    },
    treeFind(tree, func) {
      for (const data of tree) {
        if (func(data)) return data;
        if (data.children && data.children.length) {
          const res = this.treeFind(data.children, func);
          if (res) return res;
        }
      }
      return null;
    },
    initCurDepartment(id, departmentName) {
      this.curDepartment = {
        departmentName,
        id
      };
      // this.getoutboundMore();
    },
    eventpartListShow(item, index) {
      if (this.showIndex !== index || !this.show) {
        this.show = true;
      } else {
        this.show = false;
      }
      this.childPageNum = 1;
      this.showMore = false;
      this.showIndex = index;
      if (this.show) {
        this.getReplaceTaskRecordDepartmentDetails(item);
      }
    },
    eventNext(item) {
      this.showMore = false;
      if (this.isLastLevel) {
        this.eventChlid(item);
      } else {
        // this.$refs.depTree.change(item.departmentId, item.departmentName);
        if (item.departmentId && item.departmentName) {
          this.$emit("eventOpenNext", item);
        }
      }
    },
    eventChlid(item) {},
    eventReplaceAdd(item) {
      this.show = false;
      this.$router.push({
        name: "replaceAdd",
        query: {
          // type: this.statusIndex,
          departmentName: this.curDepartment.departmentName,
          id: item.id
        }
      });
    },
    diffTime(item) {
      // return (dayjs(item.starttime).diff(dayjs(item.createTime))/86400000).toFixed(2)
      return dayjs(item.starttime).diff(dayjs(item.createTime), "hour");
    },
    eventDetail(item) {
      this.show = false;
      this.$router.push({
        name: "replaceDetail",
        query: {
          departmentName: this.curDepartment.departmentName,
          isLastLevel: +this.isLastLevel,
          id: item.id
        }
      });
    },
    remainingTime(startTime) {
      const date1 = dayjs();
      const date2 = dayjs(startTime);
      console.log(date1.diff(date2));
      let text = date1.diff(date2); // 20214000000 default milliseconds
      return text;
    },
    reset() {
      this.curDepartment.id = "";
      this.curDepartment.departmentName = "全企业";
    },
  }
};
</script>
<style lang="less">
.outbound-tab {
  .vux-tab {
    height: 45px !important;
    background: #1b1c32;
    .vux-tab-item {
      background: none;
      color: #fff;
    }
  }
}
</style>
<style lang="less" scoped>
.showPie {
  text-align: -webkit-center;
}
.report_time {
  font-size: 12px;
  color: #ffffff59;
}
.fade-enter-active,
.fade-leave-active {
  transform: translateY(0);
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateY(-140%);
}
.outbound {
  min-height: 100vh;
  height: auto;
  // overflow: hidden;
  // background: #1b1c32;
  position: relative;
  &.show-more-open {
    overflow: hidden;
  }

  .tab-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0;
    background-color: #22233f;
    .tab-nav-item {
      flex: 1;
      color: #456de6;
      font-size: 14px;
      padding: 6px 0 8px;
      text-align: center;
      margin: 0 6px;
      border-radius: 4px;
      border: 1px solid #456de6;
      display: flex;
      flex-direction: column;
      &.overdue {
        color: #f5a623;
        border: 1px solid #f5a623;
      }
      &.active {
        color: #fff;
        background: #456de6;
        border: 1px solid #456de6;
        &.overdue {
          color: #fff;
          background: #f5a623;
          border: 1px solid #f5a623;
        }
      }
    }
  }
  .nav-tab {
    display: flex;
    align-items: center;
    background-color: #18182c;
    > div {
      flex: 1;
      padding: 16px;
      text-align: center;
      font-size: 16px;
      color: #fff;
      &.tab-active {
        color: rgb(69, 109, 230);
      }
    }
  }
  .showPie {
    margin: 0 auto;
    padding: 8px 0;
    width: 100%;
    &.show {
      height: auto;
    }

    // div {
    // background-color: unset !important;
    // }
    .show-title {
      color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      padding: 0 16px;
      .show-btn {
        color: #fff;
        font-size: 12px;
        display: flex;
        align-items: center;
      }
    }
  }
  .fixed_dep_box {
    // padding: 5px 0;
    background: #22233f;
    width: 80%;
    .btn_box {
      display: flex;
      // padding: 0 16px;
      justify-content: space-between;
      position: relative;
      height: 28px;
      .department_select {
        position: relative;
        width: 100%;
        border-radius: 2px;
        background: #292a4d;
        transition: background 0.3s ease-in-out;
        &.active {
          background: #383a69;
        }
        .department_name {
          padding: 5px 9px;
          padding-right: 30px;
          color: #fff;
          font-size: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .selece_icon {
          position: absolute;
          top: 50%;
          right: 8px;
          margin-top: -6px;
          transition: transform 0.3s ease-in-out;
          transform-origin: 50% 50%;
        }
      }
      .dep_box {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: -255px;
        padding-right: 16px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 4px;
        height: 250px;
        overflow-y: scroll;
        z-index: 9999999;
        -webkit-overflow-scrolling: touch;
      }
      .toggle {
        outline: none;
        border: none;
        background: inherit;
        font-size: 14px;
        color: #fff;
        .btn_icon {
          margin-top: -5px;
        }
      }
    }
  }
  .outbound-work {
    // background: #1b1c32;
    .outbound-work-wrapper {
      padding: 0 16px 50px;
      // height: calc(~"100vh" - 138px);
      overflow: auto;
      .device-card {
        margin-bottom: 12px;
        .device-code {
          margin-left: 6px;
          color: rgba(255, 255, 255, 0.6);
        }
        .device-card-body {
          .body-item {
            font-size: 14px;
            margin: 3px 0;
            display: flex;
            align-items: center;
            line-height: 24px;
            .body-item-key {
              flex: none;
              min-width: 25%;
              .device-status {
                position: relative;
                margin-left: 16px;
                color: rgba(255, 255, 255, 0.6);
                &::before {
                  content: "";
                  position: absolute;
                  left: -12px;
                  top: 7px;
                  width: 8px;
                  height: 8px;
                  border-radius: 4px;
                  background-color: #fff;
                }
              }
              .status1::before {
                background-color: gray;
              }
              .status2::before {
                background-color: #456de5;
              }
              .status3::before {
                background-color: #dc9610;
              }
              .status4::before {
                background-color: #dd6031;
              }
              .status5::before {
                background-color: #d2d2d2;
              }
              span {
                margin-left: 4px;
              }
            }
            // .body-item-value {
            // }
            .body-item-next {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
          }
        }
      }

      .desc_box {
        padding: 8px;
        height: auto;
        min-height: 80px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 14px;
        color: #fff;
        background: #292a4d;
        border-radius: 5px;
        margin-bottom: 12px;
        .ellipsis {
          display: inherit !important;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .item_title {
          font-size: 17px;
          color: #fff;
          // overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: keep-all;
          display: flex;
          align-items: center;
          justify-content: space-between;
          // &.overdue {
          //   justify-content: flex-start;
          // }
          .tag {
            color: #4266d6;
            float: right;
            font-size: 15px;

            &.yollow {
              color: #dd9710;
            }
            &.redy {
              color: #f56c6c;
            }
            &.green {
              color: #67c23a;
            }
          }
          .title-label {
            margin-left: -8px;
            border-radius: 20px;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            font-size: 14px;
            padding: 0 12px 1px 8px;
            background-color: #456de6;
            margin-right: 8px;
          }
          .title-text {
            margin-right: 8px;
          }
          .title-tip {
            width: 100%;
            margin-right: 8px;
            font-size: 14px;
            // color: #dd9710;
            &.status {
              color: #456de6;
            }
            &.status1,
            &.status4 {
              color: #4fa8e7;
            }
            &.status3 {
              color: #456de6;
            }
            &.status5,
            &.status7,
            &.status11 {
              color: #dd9710;
            }
            // &.green {
            //   color: #67c23a;
            // }
            // &.gray {
            //   color: #999;
            // }
          }
        }
        .item-body {
          color: #456de6;
          font-size: 16px;
          padding: 12px 0 4px;
          display: flex;
          justify-content: space-between;
          > span {
            flex: 1;
          }
          .item-show {
            color: #fff;
            font-size: 14px;
            width: 52px;
            padding: 1px 0;
            flex: none;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 80px;
            border: 1px solid #456de6;
          }
        }
        .item-body-other {
          color: rgba(255, 255, 255, 0.6);
        }
        .item-bottom {
          padding-top: 6px;
          border-top: 1px solid rgba(255, 255, 255, 0.5);
          display: flex;
          align-items: center;
          justify-content: space-between;
          .child-body-state {
            margin-left: 8px;
            padding: 0 2px 1px;
            color: #456de6;
            border: 1px solid #456de6;
            border-radius: 2px;
          }
          .handle-btn {
            margin-left: 8px;
            flex: none;
          }
          .btn {
            color: #fff;
            font-size: 14px;
            background-color: #456de6;
            padding: 2px 11px 3px;
            border-radius: 12px;
          }
        }
        .item-chlid {
          border-top: 1px solid rgba(255, 255, 255, 0.5);
          padding-top: 15px;
          padding-bottom: 6px;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.6);
          .child-title {
            color: #fff;
            // overflow: hidden;
            font-size: 16px;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: keep-all;
            display: flex;
            align-items: center;
            // justify-content: space-between;
            .child-ellipsis {
              width: 100%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .child-label {
              font-size: 14px;
              margin-right: 8px;
              padding: 0 6px 1px;
              color: #fff;
              border: 1px solid #456de6;
              border-radius: 2px;
            }
            .child-tip {
              width: 40%;
              margin-right: 8px;
              font-size: 14px;
              &.status {
                color: #dd9710;
              }
              &.status {
                color: #456de6;
              }
              &.status1,
              &.status4 {
                color: #4fa8e7;
              }
              &.status3 {
                color: #456de6;
              }
              &.status5,
              &.status7,
              &.status11 {
                color: #dd9710;
              }
            }
          }

          .child-body {
            font-size: 14px;
            margin: 8px 0;
            display: flex;
            align-items: center;
            // justify-content: space-between;
            .child-body-state {
              margin-left: 8px;
              padding: 0 2px 1px;
              color: #456de6;
              border: 1px solid #456de6;
              border-radius: 2px;
            }
            &.handle {
              justify-content: space-between;
              // color: #fff;
            }
          }
          .handle-btn {
            margin-left: 8px;
            flex: none;
          }
          .btn {
            color: #fff;
            font-size: 14px;
            background-color: #456de6;
            padding: 2px 11px 3px;
            border-radius: 12px;
          }
        }
        .their {
          font-size: 14px;
          color: #fff;
        }
        .more  {
          display: -webkit-box !important;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .time {
          font-size: 14px;
          color: rgba(69, 109, 230, 1);
        }
        .newpage_work_more {
          height: 40px;
          font-size: 12px;
          line-height: 40px;
          text-align: center;
          color: #456de6;
        }
      }

      .newpage_work_more {
        height: 40px;
        font-size: 12px;
        line-height: 40px;
        text-align: center;
        color: #456de6;
      }
    }
  }
}
.none_conent {
  text-align: center;
  color: gray;
  /* height:30px;
    line-height:30px; */
  border-bottom: none !important;
}

.not-content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  img {
    width: 64px;
    height: 64px;
    margin-left: 20px;
  }
  .title {
    margin: 8px auto;
    width: 126px;
    height: 40px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(158, 198, 251, 1);
    line-height: 20px;
    text-align: center;
  }
}
</style>
